<template>
    <div class="contact-detail">
        <!-- wrapper -->
        <div class="wrapper">
            <div class="background" :class='{lend:isLend}'></div>
            <div class="contact-detail-user" :class='{lend:isLend}'>
                <template v-if='hasDetail'>
                    <span class="contact-user__avatar"><img :src="detail.user.avatar || placeholderImg" alt=""></span>
                    <div class="contact-user__name">
                        <div class="left">
                            <span class='name'>{{detail.user.realName || placeholder}}</span>
                            <p class='zm'>{{detail.user.zmScore || placeholder}}</p>
                        </div>
                        <div class="right" v-if='realName'>
                            <img class='auth' src="../images/verify_police@3x.png">
                            <img class='auth' src="../images/verify_cell@3x.png">
                        </div>
                    </div>
                    <div class="contact-user__info">
                        <div class="contact-user__phone" @click='see'>
                            <p class="number">{{detail.user.mobile || placeholder}}</p>
                            <p class="see" v-if='!isShowAll && !isLend'><img src="../images/contact_view@3x.png"></p>
                        </div>
                        <div class="contact-user__wechat" v-if='!isLend'>
                            <p class='protect' v-if='!isShowAll'><span>已保护</span> <img src="../images/ic_info_black_24px.png"> </p>
                            <p class='protect' v-if='isShowAll'><span>微信：{{detail.user.weixin || placeholder}}</span></p>
                        </div>
                        <div class="contact-user__operation c" v-if='userInfo.user.bizRole == "C"'>
                            <span class="item" @click='add' v-if='!detail.isContact'><img src="../images/contact_add@3x.png"></span>
                            <span class="item mid" @click.stop='goChat(detail.user.uuid)'><img src="../images/contact_chat@3x.png"></span>
                        </div>
                        <div class="contact-user__operation" v-if='isShowAll'>
                            <span class="item" @click='add' v-if='!detail.isContact'><img src="../images/contact_add@3x.png"></span>
                            <span class="item mid" @click='callPhone(detail.user.mobile)'><img src="../images/contact_call@3x.png"></span>
                            <span class="item" @click.stop='goChat(detail.user.uuid)'><img src="../images/contact_chat@3x.png"></span>
                        </div>
                    </div>
                    <div class="contact-user__other">
                        <div v-if='!isLend' class="detail" @click='goLoanDetail(detail.user.uuid)'>
                            <img src="../images/contact_debt@3x.png">
                            <p>负债详情</p>
                        </div>
                        <div class="detail" @click="goReportDetail">
                            <img src="../images/contact_info@3x.png">
                            <p>信用报告</p>
                        </div>
                    </div>
                </template>
            </div>

            <div class="loan-detail-repayment" v-if='!isLend'>
                <p class='contact-title'>- 求借款计划 -</p>
                <div class="repayment-detail">
                    <div class="card nail3" v-for='item in loanInList' @click='goLoanInDetailOther(item.borrowNo)'>
                        <div class="card__header">
                            <div class="loan-money">
                                <p class="loan-money__amount orange">{{ item.borrowAmount | toYuan }}元</p>
                                <p class="loan-money__info"><i>{{ item.borrowDays }}天</i><i>{{ item.yearRate / 100 }}%年化</i></p>
                            </div>
                            <div class="fundraising-info">
                                <p class='font-body1'>{{ item.borrowStateStr }}</p>
                                <div class='font-caption'>
                                    <p>有效时间: </p><count-down :date='item.borrowEffectiveTime'></count-down>
                                </div>
                            </div>
                        </div>
                        <ul class="card__info">
                            <li class="card__info-item">借款日期：{{ item.createdAt | dateFormat }}</li>
                            <li class="card__info-item">借款用途：{{ item.borrowUsage }}</li>
                            <li class="card__info-item">还款方式：{{ item.repayWayStr }}</li>
                            <li class="card__info-item">服务费： {{ item.serviceFee | toYuan }}元</li>
                            <li class="card__info-item">所有人可见：{{ item.public | booleanToStr }}</li>
                        </ul>
                    </div>
                    <p class="page-placeholder" v-show='!loanInList.length'><span>暂无借款计划</span></p>
                </div>
            </div>

            <div class="loan-detail-repayment" v-if='isLend'>
                <div class="contact-lend-info">
                    <div class="contact-lend-info__item">
                        <p>{{detail.lendAmount | toYuan}}</p>
                        <span>累计出借 (元)</span>
                    </div>
                    <div class="contact-lend-info__item">
                        <p>{{detail.lendTime}}</p>
                        <span>出借次数</span>
                    </div>
                </div>
                <p class='contact-title'>- 出借计划 -</p>
                <div class="repayment-detail">
                    <div class="card nail3" v-for='item in loanOutList' @click='goLoanOutDetailOther(item.lendNo)'>
                        <div class="card__header no-border">
                            <div class="loan-money">
                                <p class="loan-money__info loan-out">可借额度</p>
                                <p class="loan-money__amount purple">{{item.lendAmountFrom | toYuan}}～{{item.lendAmountTo | toYuan}}元</p>
                            </div>
                            <div class="loan-user-info" v-if='item.user'>
                                <span class="loan-user-info__avatar"><img :src="item.user && item.user.avatar || placeholderImg" alt=""></span>
                                <div class="loan-user-info__box">
                                    <p class='loan-user-info__name'>{{item.user && item.user.realName || placeholder}}</p>
                                    <p class='loan-user-info__phone'>出借人</p>
                                </div>
                            </div>
                        </div>
                        <ul class="loan-out-info">
                            <li class="loan-out-info__item" v-if='item.daysType == "DAY"'>
                                <p class='persent'>{{daysTransform(item.lendDaysFrom,item.lendDaysTo,'day')}}</p>
                                <span>可借时长</span>
                            </li>
                            <li class="loan-out-info__item" v-else>
                                <p class='persent'>{{daysTransform(item.lendDaysFrom,item.lendDaysTo,'period')}}</p>
                                <span>可借时长</span>
                            </li>
                            <li class="loan-out-info__item">
                                <p>{{item.yearRate / 100}}%</p>
                                <span>年利率</span>
                            </li>
                            <li class="loan-out-info__item">
                                <p>{{item.serviceFeeRate / 100}}% | {{item.serviceFee / 100}}元起</p>
                                <span>服务费</span>
                            </li>
                        </ul>
                        <p class="loan-out-data">
                            <span>{{item.applyCount}}</span>
                            人申请  |  {{ caclPersent(item.passCount, item.rejectCount) }}%通过  |  {{item.dealAvgTime | timeToHours}}小时处理</p>
                    </div>
                    <p class="page-placeholder" v-show='!loanOutList.length'><span>暂无出借计划</span></p>
                </div>
            </div>
        </div>

        <modal 
            :show='show_modal_loan_detail'
            @close='show_modal_loan_detail = false'>
            <div class='modal-repayment-detail'>
                <div class="modal-repayment-detail__header">
                    <div class='modal-repayment-detail__period'>
                        <p class="period">第2期</p>
                        <p class="time">2017/04/27</p>
                    </div>
                    <p class='modal-repayment-detail__money'>85.00</p>
                </div>
                <ul class="modal-repayment-detail__main">
                    <li class="modal-repayment-detail__item">
                        <p class="key">本金</p>
                        <p class="value">83.33</p>
                    </li>
                    <li class="modal-repayment-detail__item">
                        <p class="key">利息</p>
                        <p class="value">1.67</p>
                    </li>
                    <li class="modal-repayment-detail__item">
                        <p class="key">罚息</p>
                        <p class="value">0</p>
                    </li>
                    <li class="modal-repayment-detail__item">
                        <p class="key">逾期管理费</p>
                        <p class="value">0</p>
                    </li>
                </ul>
            </div>
        </modal>

        <auth-step
            v-if='noAuth && userInfo.user'
            title='contact'
            :show='showTips'
            @toggle='showTips = !showTips'
            @close='showTips = false'></auth-step>

        <confirm 
            v-if='detail.user'
            :show='show_contact_add'
            @close='show_contact_add = false'
            @confirm='applyContact'
            :tips='`需要发送申请给${detail.user.realName}`'
            title='添加联系人申请'>
                <textarea class="confirm-textarea" placeholder="例如: 我想向你借款" rows='2' v-model='applyReason'></textarea>
        </confirm>

        <confirm
            class='modal-score'
            :show='show_pay'
            @close='show_pay = false'
            closeText=''
            confirmText=''
            tips='此功能为收费增值服务，需使用点券'
            title='查看联系详情'>
                <div class='modal-score__info'>
                    <span class="modal-score__text">使用点券</span>
                    <div>
                        <span class="modal-score__use">{{detail.payFee | toYuan('int')}}点</span>
                        <p class="modal-score__mine"> 我的当前点券：{{score | toYuan('int')}}</p>
                    </div>
                </div>
                <div class="button long" v-if='score < detail.payFee' @click='goRecharge'>额度不足，充值点券</div>
                <div @click='pay' class="button long" v-else>确认使用</div>
        </confirm>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import countDown from '../components/CountDown.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import authStep from '../components/AuthStep.vue'
    import tab from '../components/Tab.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import booleanToStr from '../filters/filter-booleanToStr'
    import { timeToHours } from '../filters/filter-timeFormat'
    import { convertRequestURL } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { scoreApi, allApi, contactApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            authStep,
            loading,
            toolTip,
            modal,
            countDown,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        filters:{
            toYuan,
            dateFormat,
            booleanToStr,
            timeToHours
        },
        data() {
            return {
                placeholderImg:require('../images/loading_1.png'),
                id:this.$route.params.id,
                isLend:this.$route.query.type=='lend',
                placeholder:'--',
                score:'',
                detail:{},
                loanInList:[],
                loanOutList:[],
                payStatus:'',
                showTips:false,
                show_pay:false,
                showPayPassword:false,
                tabIndex:0,
                payways:[{
                    value:0,
                    display:'还款方式1'
                },{
                    value:1,
                    display:'还款方式2'
                },{
                    value:2,
                    display:'还款方式3'
                }],
                show_contact_add:false,
                applyReason:'',
                show_modal_loan_detail:false,
                argeement:true,
                payway:-1,
                showDetail:false,
                payPasswordShow:false,
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            noAuth(){
                return (this.userInfo.user && this.userInfo.user.validState != 'OK' ) || this.userInfo.noZmxy || this.userInfo.noOperators 
            },
            isShowAll(){
                return this.detail.paidFee || this.detail.isContact
            },
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasDetail(){
                return !_.isEmpty(this.detail)
            },
            realName(){
                if(this.hasDetail){
                    return this.detail.user.validState == 'OK'
                }
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // function
            daysTransform(from,to,type){
                let suffix
                let fromStr = from
                let toStr = to

                if(type == 'day') suffix = '天'
                else suffix = '期'

                if(from >= 30 && type == 'day'){
                    suffix = '个月'
                    fromStr = from / 30 
                    toStr = to / 30 

                }
                if(from == to){
                    return fromStr + suffix
                }
                else{
                    return fromStr + suffix + '~' + toStr + suffix
                }
            },
            goLoanDetail(id){
                if(this.noAuth){
                    this.showTips = true
                    return
                }
                this.$router.push({
                    name:'loan-detail',
                    params:{
                        id:id
                    }
                })
                this.$ga.event({
                  eventCategory: 'debt _v',
                  eventAction: 'click',
                  eventLabel: '负债详情点击次数'
                })
                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'debt _v',
                    eventDescr:'负债详情点击次数',
                    eventValue:JSON.stringify({
                        uuid:id
                    }),
                })
            },
            see(){

                if(this.noAuth){
                    this.showTips = true
                    return
                }
                if(this.userInfo.isExpired) {
                    this.setMsgTip({
                        text:'使用此功能需有信用报告才可使用，请先完成信用报告',
                        type:'warn'
                    })
                    this.$router.push({
                        name:'user-credit-report-index',
                        params:{
                            no:'default'
                        },
                        query:{
                            type:'pass'
                        }
                    })
                    return
                }
                if(this.userInfo.user.bizRole == "C") return
                if(this.isShowAll) return

                this.$ga.event({
                  eventCategory: 'See_v',
                  eventAction: 'click',
                  eventLabel: '查看按钮点击量'
                })

                this.showLoading()
                scoreApi.getBalance()
                .then(result=>{
                    this.score = result.balance.totalScore
                    this.show_pay = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goRecharge(){
                this.$router.push({
                    name:'user-recharge-voucher',
                    query:{
                        uuid:this.detail.user.uuid,
                        name:'contact-detail'
                    }
                })
            },
            pay(){
                if(this.detail.payFee && this.score < this.detail.payFee){
                    this.goRouter('user-recharge-voucher')
                    return
                }
                this.showLoading()
                contactApi.payFee({
                    uuid:this.detail.user.uuid,
                    payFee:this.detail.payFee
                })
                .then(result=>{
                    this.getData()
                    this.show_pay = false
                    this.setMsgTip({
                        text:'使用点券成功',
                        type:'success'
                    })
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            callPhone(phone){
                location.href=`tel:${phone}`
            },
            caclPersent(pass,reject){
                if(pass == 0) return 0
                return (pass/(pass+reject)*100).toFixed(2)
            },

            withinOneDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = diff.diff(now,'days')
                if(diffDays <= 0) return true
                return diffDays
                return true
            },
            goLoanInDetailOther(number){
                if(this.noAuth){
                    this.showTips = true
                    return
                }
                this.$router.push({
                    name:'loan-in-detail-other',
                    params:{
                        number:number
                    }
                })
            },
            goLoanOutDetailOther(number){
                if(this.noAuth){
                    this.showTips = true
                    return
                }
                this.$router.push({
                    name:'loan-out-detail-other',
                    params:{
                        number:number
                    }
                })
            },
            goReportDetail(){
                if(this.noAuth){
                    this.showTips = true
                    return
                }
                if(!this.detail.creditReportNo){
                    this.setMsgTip({
                        text:'该用户暂无信用报告！',
                        type:'warn'
                    })
                    return
                }
                this.$router.push({
                    name:'user-credit-report-detail',
                    params:{
                        no:this.detail.creditReportNo
                    }
                })
            },
            goRepayment(){
                this.$router.push({
                    name:'repayment'
                })
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getDetail(num){
                return contactApi.detail({
                    contactId:this.id
                })
                .then(result=>{
                    this.detail = result
                })
            },
            add(){
                if(!this.userInfo.isPay || this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'请先完成信用报告',
                        type:'info'

                    })
                    return
                }
                
                this.showLoading()
                contactApi.judge({
                    mobile:this.detail.user.uuid
                })
                .then(result=>{
                    this.show_contact_add = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            applyContact(){
                this.showLoading()
                contactApi.apply({
                    mobile:this.detail.user.uuid,
                    applyReason:this.applyReason
                })
                .then(result=>{
                    this.hideLoading()
                    this.show_contact_add = false
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            addContact(result){
                let type = this.$route.query.type
                if(type == 'add'){
                    contactApi.add({
                        mobile:result.user.mobile
                    },'share')
                    .then(result=>{
                    })
                    .catch(error => {
                        console.error(error)
                    })
                }
            },
            goChat(id){
                if(!this.userInfo.isPay || this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'请先完成信用报告',
                        type:'info'

                    })
                    return
                }
                
                this.showLoading()
                contactApi.im({
                    uuid:id
                })
                .then(result=>{
                    this.hideLoading()
                    let info = result.info
                    let myAccid = info.myAccid
                    let accid = info.accid
                    let token = info.token
                    // return
                    location.href = convertRequestURL(`?token=${token}&uid=${myAccid}#/chat/p2p-${accid}`,'chat')
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getLoanInList(){
                return contactApi.loanInList({
                    contactId:this.id,
                    pageSize:100,
                    pageNo:1
                })
                .then(result=>{
                    this.loanInList = result
                })
            },
            getLoanOutList(){
                return contactApi.loanOutList({
                    contactId:this.id,
                    pageSize:20,
                    pageNo:1
                })
                .then(result=>{
                    this.loanOutList = result
                })
            },
            getData(){
                this.showLoading()
                Promise.all([this.getDetail(),this.getLoanInList(),this.getLoanOutList()])
                .then(result=> {
                    setTimeout(()=>{
                        this.showTips = true
                    },300)
                    this.hideLoading()
                })
                .catch(error=> {
                    setTimeout(()=>{
                        this.showTips = true
                    },300)
                    console.log(error);
                    this.hideLoading()
                });
            },
        },
        created(){
            this.getData()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .contact-detail{
        .contact-title{
            padding: 8px 0 0 0;
            @extend %font-body2;
            text-align:center;
        }
        .contact-lend-info{
            display: flex;
            padding:9px;
            background-color: #fff;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .contact-lend-info__item{
            position: relative;
            flex:1;
            text-align: center;
            &:after{
                content:'';
                position: absolute;
                right:0;
                top:10px;
                bottom: 10px;
                border-right: 1px solid $sectionColor;
            }
            &:last-child:after{
                display: none;
            }
            p{
                color:$importColor;
                @extend %font-subhead;
            }
            span{
                @extend %font-caption;
            }
        }
        .loan-detail-user__avatar{
            position: absolute;
        }
        .background{
            width: 100%;
            padding-top: 35%;
            position: absolute;
            top:0;
            left:0;
            background-color: $orange;
            &.lend{
                background-color: $purple;
            }
        }
        .contact-detail-user{
            background-color:#fff;
            margin:48px 16px 16px 16px;
            min-height:219px;
            position: relative;
            border-radius:2px;
            box-shadow:0 0 8px 0 $sectionColor, 0 8px 8px 0 $sectionColor;
            &.lend{
                min-height:183px;
                .contact-user__other{
                    margin-top: 25px;
                }
            }
        }
        .contact-user__avatar{
            width: 52px;
            height: 52px;
            padding:2px;
            border-radius:50%;
            background-color:#fff;
            box-shadow:0 2px 2px 0 $sectionColor;
            position:absolute;
            top:-28px;
            left:24px;
            img{
                border-radius:50%;
                width: 100%;
            }
        }
        .contact-user__name{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:40px 16px 0 24px;
            .left{
                display: flex;
                align-items:center;
            }
            .name{
                @extend %font-title;
                color:$importColor;
            }
            .zm{
                @extend %font-caption;
                display: block;
                width: 49px;
                height: 21px;
                line-height: 21px;
                background: url(../images/bg_zhimafen@3x.png) no-repeat left center;
                background-size: 49px 21px;
                margin-left:9px;
                text-align:left;
                padding-left:18px;
                color:$green;
            }
            .right{
                display: flex;
                align-items: center;
            }
            .auth{
                width: 67px;
                margin-left: 8px;
            }
        }
        .contact-user__info{
            position: relative;
        }
        .contact-user__phone{
            padding-left: 24px;
            padding-right: 16px;
            margin-top: 22px;
            display: flex;
            align-items: center;
            .number{
                @extend %font-title;
                color:$importColor;
            }
            .see{
                padding:3px 8px;
                img{
                    width: 56px;
                }
            }
        }
        .contact-user__wechat{
            padding-left: 24px;
            padding-bottom: 16px;
            .protect{
                display: flex;
                align-items: center;
                span{
                    display: block;
                    @extend %font-caption;
                }
                img{
                    margin-left: 4px;
                    width: 18px;
                    height: 18px;
                }
            }
        }
        .contact-user__operation{
            position: absolute;
            right:16px;
            top:50%;
            transform:translate(0,-50%);
            display: flex;
            &.c{
                .item.mid{
                    padding-right: 0;
                }
            }
            .item{
                img{
                    width: 32px;
                    height: 32px;
                }
                &.mid{
                    padding:0 16px;
                }
            }
        }
        .contact-user__other{
            display: flex;
            align-items: center;
            margin: 0 16px;
            border-top:1px solid $sectionColor;
            .detail{
                position: relative;
                display: flex;
                flex:1;
                justify-content: center;
                align-items: center;
                padding: 16px;
                &:after{
                    content:'';
                    position: absolute;
                    top:12px;
                    bottom:12px;
                    right:0;
                    border-right: 1px solid $sectionColor;
                }
                &:last-child{
                    &:after{
                        display: none;
                    }
                }
                img{
                    width: 24px;
                    height: 24px;
                }
                p{
                    padding-left: 4px;
                    @extend %font-caption;
                }
            }
        }
        .loan-detail-main{
            background-color: #fff;
            margin-top: 52px;
            padding:0 24px;
            position: relative;
        }
        .repayment-tab{
            display: flex;
            background-color: #fff;
        }
        .repayment-tab__item{
            flex:1;
            text-align: center;
            padding:10px 0 8px 0;
            position: relative;
            &:after{
                content:'';
                transition:ease 150ms transform;
                transform:scale(0);
                border-top:2px solid $orange;
                position: absolute;
                bottom:0;
                left:16px;
                right:16px;
            }
            &:active,&.active{
                &:after{
                    transform:scale(1);
                }
            }
            .title{
                @extend %font-title;
                color:$importColor;
            }
            .money{
                @extend %font-caption;
            }
        }
        .repayment-detail{
            padding-top: 16px;
            .loan-detail-money{
                width: 100%;
            }
        }
        .repayment-detail__item{
            @extend %font-caption;
            color:$importColor;
            background-color: #fff;
            &.head{
                color:$defaultColor;
                font-weight: 400;
                background-color: transparent;
            }
            display: flex;
            padding: 0 24px;
            border-top:1px solid $sectionColor;
        }
        .repayment-detail__value{
            width: 20%;
            flex:1;
            box-sizing:border-box;
            padding: 14px 0 14px 0;
            &:first-child{
                padding-left: 0;
            }
        }
        .modal-repayment-detail{

        }
        .modal-repayment-detail__header{
            display: flex;
            justify-content: space-between;
            padding-bottom: 8px;
            border-bottom: 1px solid $sectionColor;
        }
        .modal-repayment-detail__period{
            .period{
                @extend %font-body1;
                color:$importColor;
            }
            .time{
                @extend %font-caption;
            }
        }
        .modal-repayment-detail__money{
                @extend %font-title;
                color:$importColor;
        }
        .modal-repayment-detail__main{
            padding-top: 8px;
        }
        .modal-repayment-detail__item{
            padding-top: 8px;
            display: flex;
            justify-content: space-between;
            .key{
                @extend %font-body1;
                color:$importColor;
            }
            .value{
                @extend %font-caption;
            }
        }
        .modal-score{
            color:$importColor;
            .modal-score__info{
                padding:10px 0;
                margin:16px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .modal-score__use{
                @extend %font-subhead;
                color:$orange;
                display: block;
                text-align: right;
            }
            .modal-score__mine{
                @extend %font-caption;
            }
        }
    }

</style>
